<template>
  <MenuLayout>
    <template #content>
        <el-tabs v-model="activeIndex" @tab-click="tabClick">
          <el-tab-pane label="服务商信息" name="1">
            <serviceCompany />
          </el-tab-pane>
          <el-tab-pane label="服务产品管理" name="2">
            <div class="button_box">
              <el-button type="primary" plain @click="submitToApply">申请上架</el-button>
            </div>
            <service-product-comp />
          </el-tab-pane>
        </el-tabs>
      <div>
      </div>
    </template>
  </MenuLayout>
</template>
<script>
import MenuLayout from '@/components/MenuLayout';
import serviceCompany from "@/views/pageContent/serviceCompanyManage/component/serviceCompanyComp.vue";
import ServiceProductComp from "@/views/pageContent/serviceCompanyManage/component/serviceProductComp.vue";
import { mapGetters } from 'vuex'
export default {
  data () {
    return {
      activeIndex: '1',
      formState: 0,
      isHaveServiceCompanyInfo:true
    }
  },
  components: {
    ServiceProductComp,
    MenuLayout,
    serviceCompany
  },
  computed: {
    ...mapGetters([
      'userInfo'
    ]),
  },
  mounted () {
    const tabIndex = this.$route.query?.from
    if (tabIndex) {
      this.activeIndex = tabIndex
    }
    if (this.userInfo?.isServiceInfoComplete == 1) {
      this.activeIndex = '2'
    } else {
      this.activeIndex = '1'
    }
  },
  methods: {
    tabClick() {},
    submitToApply() {
      if (!this.isHaveServiceCompanyInfo) {
        this.$confirm('请先补充“服务商信息”才可进行“服务商品上架申请”。', '申请上架', {
          type: 'warning',
          confirmButtonText: '去填写',
          cancelButtonText: '暂不申请'
        }).then(() => {
          this.activeIndex = '1'
        }).catch(() => {})
      } else {
        this.$router.push({path:'/serviceProductList', query:{from: this.activeIndex}})
      }
    },
    onSubmit() {
      this.$refs['serviceForm'].validate(valid => {
        if (valid) {

        } else {

        }
      })
    },
  }
}
</script>

<style scoped lang="scss">
@import "@/assets/css/element-variables";
:deep(.el-tabs__item.is-top:nth-child(2)) {
  padding-left: 40px !important;
}
:deep(.el-tabs__item.is-active) {
  font-weight: bold;
}
:deep .el-tabs__item:hover {
  color: $--color-primary;
}
:deep(.el-tabs__active-bar) {
  background-color: $--color-primary;
}
:deep(.el-tabs__header) {
  margin: 0 0 20px;
}
.button_box {
  text-align: right;
  padding: 0 30px 20px 30px;
}
</style>
